<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品详情</title>
    <link rel="stylesheet" href="../CSS/public-css.css">
    <link rel="stylesheet" href="../CSS/details-of-goods-css.css">
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="main-div">
    <div class="header-div">
        <div class="logo-div">
            <img src="../img/goktech-img/images/logo.png" alt="无法加载图片">
        </div>
        <div class="form-div">
            <form action="">
                <input type="search" placeholder="热门搜索：干花花瓶">
                <input type="button">
            </form>
        </div>
    </div>
    <div class="body-div">
        <div class="nav-div">
            <ul>
                <li><a href="../homePage.jsp">商品首页</a></li>
                <li><a href="#">所有商品</a>
                    <div class="dropdown-content-one">
                        <div class="wrapper">
                            <a href="#">
                                <div class="img-div-one">
                                    <img src="../img/WebProgram/img/nav1.jpg" alt="无法加载图片">
                                </div>
                                <div class="dropdown-text-div">
                                    <span>浓情欧式</span>
                                </div>
                            </a>
                            <a href="#">
                                <div class="img-div-one">
                                    <img src="../img/WebProgram/img/nav2.jpg" alt="无法加载图片">
                                </div>
                                <div class="dropdown-text-div">
                                    <span>浪漫美式</span>
                                </div>
                            </a>
                            <a href="#">
                                <div class="img-div-one">
                                    <img src="../img/WebProgram/img/nav3.jpg" alt="无法加载图片">
                                </div>
                                <div class="dropdown-text-div">
                                    <span>雅致中式</span>
                                </div>
                            </a>
                            <a href="#">
                                <div class="img-div-one">
                                    <img src="../img/WebProgram/img/nav6.jpg" alt="无法加载图片">
                                </div>
                                <div class="dropdown-text-div">
                                    <span>简约现代</span>
                                </div>
                            </a>
                            <a href="#">
                                <div class="img-div-one">
                                    <img src="../img/WebProgram/img/nav5.jpg" alt="无法加载图片">
                                </div>
                                <div class="dropdown-text-div">
                                    <span class="text-span">创意装饰</span>
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
                <li><a href="#">装饰摆件</a></li>
                <li><a href="#">布艺软饰</a></li>
                <li><a href="#">墙饰壁挂</a></li>
                <li><a href="#">蜡艺香薰</a></li>
                <li><a href="#">创意家居</a></li>
            </ul>
        </div>
        <div class="location-div">
            <div class="parcel-div">
                <a href="../homePage.jsp">首页</a>
                <span>&nbsp;&nbsp;/&nbsp;&nbsp;</span>
                <a class="goods-link" href="details-of-goods.jsp"></a>
            </div>
        </div>
    </div>
    <div class="goods-show-div">
        <div class="parcel-div">
            <div class="goods-img">
                <img src="../img/goktech-img/images/European-flo1.jpg" alt="无法加载图片">
            </div>
            <div class="goods-detail">
                <h2>【花艺】七头美丽玫瑰仿真花束</h2>
                <h4>形象逼真的人造花加上搭配的多样性、丰富性，给我们带来有热情、有惊喜、有震撼、有永恒的美丽。</h4>
                <span>￥79.00</span>
                <div class="sort">
                    <span>颜色分类</span>
                    <div class="goods-color-sort">
                        <div>
                            <img src="../img/goodsPreview/xx103/color-sort/green-xx103.jpg" alt="">
                            <div class="color-text"><span>绿色</span></div>
                        </div>
                        <div>
                            <img src="../img/goodsPreview/xx103/color-sort/orange-xx103.jpg" alt="">
                            <div class="color-text"><span>橙色</span></div>
                        </div>
                        <div>
                            <img src="../img/goodsPreview/xx103/color-sort/pink-xx103.jpg" alt="">
                            <div class="color-text"><span>粉色</span></div>
                        </div>
                        <div>
                            <img src="../img/goodsPreview/xx103/color-sort/white-xx103.jpg" alt="">
                            <div class="color-text"><span>白色</span></div>
                        </div>
                    </div>
                    <div class="repertory">
                        <span>库存</span>
                        <span class="goods-amount">2000</span>
                        <span>件</span>
                    </div>
                    <div class="btn">
                        <button class="reduce">-</button>
                        <span class="select-amount">1</span>
                        <button class="increase">+</button>
                    </div>
                </div>
                <div class="goods-control">
                    <button class="buy">立即购买</button>
                    <button class="add-gwc">加入购物车</button>
                </div>
                <div class="tip">
                    <span>加入购物车成功</span>
                </div>
            </div>
        </div>
        <div class="goods-show">
            <div class="parcel-div">
                <div class="show-one">
                    <img src="../img/goktech-img/images/xx103.jpg" alt="">
                </div>
                <div class="show-two">
                    <img src="../img/goodsPreview/xx103/xx103(1).jpg" alt="">
                </div>
                <div class="show-three">
                    <img src="../img/goodsPreview/xx103/xx103(2).jpg" alt="">
                </div>
                <div class="show-four">
                    <img src="../img/goodsPreview/xx103/xx103.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="goods-show-big">
            <div class="parcel-div">
                <div class="show-one">
                    <img src="../img/goktech-img/images/xx103.jpg" alt="">
                </div>
                <div class="show-two">
                    <img src="../img/goodsPreview/xx103/xx103(1).jpg" alt="">
                </div>
                <div class="show-three">
                    <img src="../img/goodsPreview/xx103/xx103(2).jpg" alt="">
                </div>
                <div class="show-four">
                    <img src="../img/goodsPreview/xx103/xx103.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="main-footer-div">
        <div class="top-div">
            <div class="parcel-div">
                <div class="clearfix">
                    <img src="../img/temp1/foot1.png" alt="无法加载图片">
                    <span>7天无理由退货</span>
                </div>
                <div class="clearfix">
                    <img src="../img/temp1/foot2.png" alt="无法加载图片">
                    <span>15天免费换货</span>
                </div>
                <div class="clearfix">
                    <img src="../img/temp1/foot3.png" alt="无法加载图片">
                    <span>满599包邮</span>
                </div>
                <div class="clearfix">
                    <img src="../img/temp1/foot4.png" alt="无法加载图片">
                    <span>手机特色服务</span>
                </div>
            </div>
        </div>
        <div class="botton-div">
            <p>最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br>
                违法和不良信息举报电话:400-800-8200,本网站所列数据,除特殊说明,所有数据均出自我司实验室测试
            </p>
        </div>
    </div>
    <div class="broadside-nav">
        <div>
            <a href="${pageContext.request.contextPath}/shoppingList">
                <img src="../img/goktech-img/images/gwc.png" alt="">
                <span>去购<br>物车</span>
            </a>
        </div>
        <div class="service-div">
            <a href="#">
                <img src="../img/goktech-img/images/gt2.png" alt="">
                <span>联系<br>客服</span>
            </a>
        </div>
        <div>
            <a href="grzx.jsp">
                <img src="../img/goktech-img/images/grzx.png" alt="">
                <span>个人<br>中心</span>
            </a>
        </div>
        <div class="hidden-div">
            <a href="#top">
                <img src="../img/goktech-img/images/gt4.png" alt="">
                <span>返回<br>顶部</span>
            </a>
        </div>
        <p class="hidden-p">400-800-8200</p>
    </div>
</div>
</body>
<script src="../js/homePage-js.js"></script>
<script src="../js/details-of-goods-js.js"></script>
<%--<script>--%>
<%--    $(".goods-control .add-gwc").on("click", function () {--%>
<%--        //模拟数据--%>
<%--        let uId = "1";--%>
<%--        let cmId = "1";--%>
<%--        let cmsNumber = $(".select-amount").html();--%>
<%--        let cId = "1";--%>
<%--        $.ajax({--%>
<%--            url: "${pageContext.request.contextPath}/shopping.do",--%>
<%--            type: "post",--%>
<%--            data: {"uId": uId, "cmId": cmId, "cmsNumber": cmsNumber, "cId": cId},--%>
<%--            dataType: "json",--%>
<%--            success: function (message) {--%>
<%--                if (message.flag) {--%>
<%--                    //实现商品详情页加入购物车提示效果--%>
<%--                    window.setTimeout(function () {--%>
<%--                        $(".tip").css("display", "block");--%>
<%--                        window.setTimeout(function () {--%>
<%--                            $(".tip").css("display", "none");--%>
<%--                        }, 2500);--%>
<%--                    }, 500);--%>
<%--                }--%>
<%--            },--%>
<%--            error: function () {--%>
<%--                console.log("错误")--%>
<%--            }--%>
<%--        })--%>
<%--    });--%>
<%--</script>--%>

<script>
    $(function () {
        var k = window.location.href.substr(window.location.href.indexOf("cmId=")+5);
        $.ajax({
            url: "${pageContext.request.contextPath}/commodity?method=selectByCmId",
            type: "POST",
            data: {"cmId": k},
            dataType: "json",
            success: function (message) {
                $(".goods-img img").attr("src","../"+message.cmImg);
                $(".goods-detail h2").text(message.cmName);
            },
            error: function (jqXHR) {
                alert("失败!");
            }
        });
    })
</script>
</html>